@import 'config/import';
@import 'variables';
@import '_mixins';

.crayons-layout__comments-billboard {
  .crayons-bb, .crayons-unit {
    .c-indicator.crayons-bb__indicator, .c-indicator.crayons-unit__indicator {
      line-height: 15px;
    }

    padding-left: var(--content-padding-x);
    padding-bottom: var(--su-6);

    @media (min-width: $breakpoint-s) {
      .text-styles {
        padding-right: var(--su-8);
      }
    }
  }
}

.billboard .crayons-dropdown.sponsorship-dropdown, .bb-placement .crayons-dropdown.sponsorship-dropdown, .bb-placement .crayons-dropdown.bb-dropdown {
  @media (min-width: $breakpoint-m) {
    max-width: 200px;
    min-width: auto;
  }

  @media (min-width: $breakpoint-l) {
    max-width: 250px;
  }

  hr {
    border: 0.5px solid var(--divider);
    margin: 8px;
  }
}

.billboard .ltag_cta, .bb-placement .ltag_cta {
  padding-top: var(--su-2);
  padding-bottom: var(--su-2);

  @media (max-width: $breakpoint-s) {
    display: block;
  }
}

// refers to the sidebar billboards where we use cards
.crayons-card.billboard .ltag_cta, .crayons-card.bb-placement .ltag_cta {
  display: block;
}

.crayons-card.hero-billboard .ltag_cta {
  display: block;
}

.long-bb-body {
  max-height: calc(100vh - 200px);
  overflow: hidden;
}
.long-bb-bottom {
  height: 180px;
  background: linear-gradient(to top, var(--card-bg), transparent);
  margin-top: -180px;
  position:relative;
  z-index: 5;
}

.popover-billboard {
  z-index: var(--z-popover);
  animation: popoverEnter 0.5s;
  box-shadow: 0 0 100px 60px rgba(0, 0, 0, 0.2) !important;
  max-height: calc(100vh - var(--header-height));
  .text-styles {
    padding-top: var(--su-4);
    padding-bottom: var(--su-4);
    font-size: calc(0.8em + 0.58vw);
    max-width: calc(var(--site-width) - var(--su-8));
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height) - var(--su-8));
  }
  @media (min-width: $breakpoint-xl) {
    .crayons-bb__header,
    .crayons-unit__header,
    .text-styles {
      margin-left: calc(54% - (var(--site-width) / 2));
    }
    .text-styles {
      font-size: 1.22em;
    }
  }
}

// Adjust popover-billboard position when main sidebar is visible
body[data-side-nav-visible='true']:not(.hidden-shell) {
  .popover-billboard {
    @media (min-width: $breakpoint-m) {
      left: 50px;
      width: calc(100% - 50px);
    }
    @media (min-width: $breakpoint-2xl) {
      left: 0;
      width: 100%;
    }
  }
}

.popover-billboard--menuopenupwards {
  .sponsorship-dropdown, .bb-dropdown {
    top: auto;
    bottom: var(--su-8);
  }
}

.hide-popover-billboard .popover-billboard {
  display: none;
}

.body-billboard {
  @media (max-width: $breakpoint-s) {
    margin: 0 -4px 0;
    padding: 7px 6px !important;
  }
  @media (min-width: $breakpoint-m) {
    margin: 0 -14px 0;
  }

}

.hero-billboard {
  margin: var(--su-2) 0 0;
  h1,
  h2,
  h3,
  p {
    text-align: center;
  }

  @media (max-width: $breakpoint-s) {
    display: block;
  }

  @media (min-width: $breakpoint-m) {
    margin: var(--su-2) var(--su-2) 0;
  }

  @media (min-width: $breakpoint-l) {
    margin: var(--su-4) var(--su-4) 0;
  }

  @media (min-width: $breakpoint-xl) {
    max-width: var(--site-width);
    margin: var(--su-4) var(--su-4) 0;
  }

  @media (min-width: 1284px) {
    max-width: var(--site-width);
    margin: var(--su-4) auto 0;
  }
}

@media (min-width: $breakpoint-s) {
  .hero-billboard h1 {
    font-size: var(--fs-3xl);
  }
}

// these are inline CTA's
//refers to the below the comments billboard on the article page
//refers to the feed/stories where we use story
.crayons-layout__comments-billboard .crayons-card.billboard .ltag_cta,
.crayons-story.billboard .ltag_cta, .crayons-layout__comments-billboard .crayons-card.bb-placement .ltag_cta,
.crayons-story.bb-placement .ltag_cta {
  padding-right: var(--su-7);
  padding-left: var(--su-7);
}

// fadeIn
@keyframes popoverEnter {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
